<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>树形结构</title>
	<link rel="stylesheet" type="text/css" href="source/tree/tree.css">
</head>
<body>
	<div id="app">
	<m-tree :data="list"></m-tree>
		<!-- <div class="tree-menu-comm tree-menu">
            <ul>
                <li>
                    <div class="tree-title" style="padding-left: 16px;"><span><strong>目录</strong> <i class="ico"></i></span></div>
                    <ul>
                        <li>
                            <div class="tree-title" style="padding-left: 32px;"><span><strong>我的音乐</strong> <i class="ico"></i></span></div>
                            <ul>
                                <li>
                                    <div class="tree-title" style="padding-left: 48px;"><span><strong>周杰伦</strong> <i class="ico"></i></span></div>
                                    <ul>
                                        <li>
                                            <div class="tree-title tree-contro-none" style="padding-left: 64px;"><span><strong>发如雪</strong> <i class="ico"></i></span></div>
                                            
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <div class="tree-title" style="padding-left: 48px;"><span><strong>王杰</strong> <i class="ico"></i></span></div>
                                    <ul>
                                        <li>
                                            <div class="tree-title tree-contro-none" style="padding-left: 64px;"><span><strong>一场游戏一场梦</strong> <i class="ico"></i></span></div>
                                            
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <div class="tree-title tree-contro-none" style="padding-left: 32px;"><span><strong>我的照片</strong> <i class="ico"></i></span></div>
                            
                        </li>
                    </ul>
                </li>
            </ul>
        </div> -->
	</div>
</body>
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
	/*
		组件的递归调用，注意递归调用的html 结构和数据结构必须完全相同，如果出现不同，将共有部分提取做单独组建
	*/
	var list = [{
        title: "目录",
        children: [{
            title: "我的音乐",
            children: [{
                title: "周杰伦",
                children: [{
                    title: "发如雪"
                }]
            }, {
                title: "王杰",
                children: [{
                    title: "一场游戏一场梦"
                }]
            }]
        }, {
            title: "我的照片"
        }]
    }];

    Vue.component( 'm-tree', {
    	props : {
    		data : {
    			type : Array,
    			default : []
    		}
    	},
    	template : `
			<div class="tree-menu-comm tree-menu">
				<ul>
	                <li v-for="item in data">
	                    <div class="tree-title" style="padding-left: 16px;">
	                    	<span><strong>{{item.title}}</strong> <i class="ico"></i></span>
	                    </div>
		                <!-- 如果有children则生成下一级结构 -->
		                <ul v-if="item.children">
							<li v-for="item of item.children">
								<div class="tree-title" style="padding-left: 16px;">
			                    	<span><strong>{{item.title}}</strong> <i class="ico"></i></span>
			                    </div>
							</li>
		                </ul>
	                </li>
                </ul>
			</div>
    	`
    });
	let vm = new Vue({
		el : '#app',
		data : {
			list
		}
	});
</script>